<template>
  <div>
    <div class="bg-container">
      <el-row style="margin-top: 10px;">
        <img src="/unhappy.png" style="height: 45px; width: 45px;"/>
        <el-row>
          <div class="text-container">
            <el-row>
              <el-button round style="height: 25px; margin-left: 20px;" type="danger">严重</el-button>
              <el-text class="bold-text" size="large">主机001的CPU使用率，最近5分钟超出基线异常点占比10%.</el-text>
            </el-row>
            <el-row style="margin-left: 20px; margin-top: 5px;">
              <el-text>最近一次异常发生于：</el-text>
              <el-text class="bold-text">2025-1-15 19：11:20</el-text>
              <el-text class="mx-1" style="margin-left: auto;">最后一次异常持续时间：</el-text>
              <el-text class="bold-text">4天5小时11分</el-text>
            </el-row>
          </div>
        </el-row>
      </el-row>
      <div>
        <el-row :gutter="20" class="risk-levels" style="margin-top: 20px;">
          <el-col :span="16">
            <div class="grid-content ep-bg-purple">
              <el-text class="mx-1" size="large" style="margin-right: 40px;">实体对象</el-text>
              <el-text class="mx-1" size="large" style="margin-right: 40px;">告警列表</el-text>
              <el-text class="mx-1" size="large" style="margin-right: 40px;">时序图</el-text>
            </div>
          </el-col>
        </el-row>
        <el-row class="light-blue-bg" style="margin-top: 10px; height: 35px;">
          <el-text class="mx-1" size="large" style="margin-left: 15px;">此问题中有一个主机发生告警</el-text>
        </el-row>
        <el-row style="margin-top: 15px;">
          <el-col :span="6">
            <el-form-item label="类别">
              <el-select clearable filterable placeholder="请选择实体类型" style="width: 300px;">
                <el-option label="类型1" value="类型1"/>
                <el-option label="类型2" value="类型2"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="告警状态">
              <el-select clearable filterable placeholder="请选择告警状态" style="width: 300px;">
                <el-option label="状态1" value="状态1"/>
                <el-option label="状态2" value="状态2"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table v-loading="loading" @selection-change="handleSelectionChange">
          <el-table-column label="实体名称" prop="status"/>
          <el-table-column label="实体类别" prop="count"/>
          <el-table-column label="对象" prop="time"/>
          <el-table-column label="告警数量" prop="duration"/>
          <el-table-column label="告警状态" prop="id"/>
          <el-table-column label="当前等级" prop="indicator"/>
          <el-table-column label="主机IP"/>
          <el-table-column label="实体标签"/>
          <el-table-column label="最后一次异常时间"/>
        </el-table>
      </div>
    </div>

    <div class="bg-container">
      <div class="bg1 rounded" style="height: 200px;">
        <el-row class="light-blue-bg rounded" style="height: 35px;">
          <el-text class="mx-1" size="large" style="margin-left: 15px;">根因结论</el-text>
        </el-row>
        <div class="root-cause-box">
          <div class="white-bg-box rounded" style="height: 155px;">
            <el-row>
              <el-text class="mx-1" size="large" style="margin-top: 10px;">问题初因</el-text>
            </el-row>
            <el-row>
              <p>
                <el-text class="mx-1" size="large" style="margin-top: 10px;">经过对2个事件的分析...</el-text>
              </p>
            </el-row>
          </div>
        </div>
      </div>

      <div class="problem-bg-box rounded" style="height: 300px; margin-top: 10px;">
        <!-- 添加按钮 -->
        <el-button style="float: right;" type="plain">问题回放</el-button>
      </div>
    </div>
  </div>
</template>

<script name="AlertDetail" setup>
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {
  addQuestionDetail,
  delQuestionDetail,
  delQuestionDetailList,
  exportQuestionDetail,
  getQuestionDetail,
  listQuestionDetail,
  updateQuestionDetail
} from "@/api/questionDetail";

const {proxy} = getCurrentInstance();

const questionDetailList = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    appearance: null,
    status: null,
    questionType: null,
    warnNumber: null,
    priority: '高风险',
    tags: null,
  },
  rules: {
    appearance: [
      {required: true, message: "问题表象不能为空", trigger: ["blur", "change"]}
    ],
    status: [
      {required: true, message: "问题状态不能为空", trigger: ["blur", "change"]}
    ],
    questionType: [
      {required: true, message: "问题类型不能为空", trigger: ["blur", "change"]}
    ],
    warnNumber: [
      {required: true, message: "聚合的报警数量不能为空", trigger: ["blur", "change"]}
    ],
    priority: [
      {required: true, message: "问题处理的优先级不能为空", trigger: ["blur", "change"]}
    ],
    tags: [
      {required: true, message: "标记问题的关键词不能为空", trigger: ["blur", "change"]}
    ],
  }
});

const {queryParams, form, rules} = toRefs(data);

// 查询问题信息列表
function getList() {
  loading.value = true;
  listQuestionDetail(queryParams.value).then(response => {
    questionDetailList.value = response.data.list;
    total.value = response.data.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    appearance: null,
    status: null,
    questionType: null,
    warnNumber: null,
    priority: null,
    tags: null,
    creator: null,
    createTime: null,
    updater: null,
    updateTime: null,
  };
  proxy.resetForm("questionDetailRef");
}

// 搜索按钮操作
function handleQuery() {
  queryParams.value.pageNo = 1;
  getList();
}

// 重置按钮操作
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

// 新增按钮操作
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加问题信息";
}

// 修改按钮操作
function handleUpdate(row) {
  reset();
  const id = row.id || ids.value[0]
  getQuestionDetail({id: id}).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改问题信息";
  });
}

// 提交按钮
function submitForm() {
  proxy.$refs["questionDetailRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateQuestionDetail(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addQuestionDetail(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

// 删除按钮操作
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除问题"' + row.id + '"的数据项？').then(function () {
    return delQuestionDetail({id: row.id});
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}

// 批量删除按钮操作
function handleDeleteList() {
  const idList = ids.value;
  proxy.$modal.confirm('是否确认删除问题"' + idList + '"的数据项？').then(function () {
    return delQuestionDetailList({ids: idList.join(',')});
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {
  });
}

// 导出按钮操作
function handleExport() {
  exportQuestionDetail(queryParams.value)
}

getList();
</script>

<style lang="scss" scoped>
.text-container {
  display: flex;
  flex-direction: column;
  border: #ccc;
}

.bold-text {
  font-weight: bold;
  margin-left: 10px;
}

.risk-levels {
  display: flex;
  border-bottom: 2px solid #ccc; /* 添加下方横线 */
  padding-bottom: 10px; /* 调整横线与文本的距离 */
}

.bg1 {
  background-color: #bbd6f3;
}

.light-blue-bg {
  background-color: #c2daf3;
  width: 100%;
}

.white-bg-box {
  background-color: white;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px; /* 添加圆角 */
  margin-top: 0px;
  margin-bottom: 8px;
  margin-left: 8px;
  margin-right: 8px;
}

.problem-bg-box {
  background-color: white;
  padding: 10px;
  border: 1px solid #ccc;
  width: 100%;
}

.rounded {
  border-radius: 10px; /* 自定义圆角大小 */
}
</style>
  